<template>
	<w-layout showNavbar navTitle="团队" :navTitleColor="publicStyles['--color-t1']" background="url('/static/image/bk.png') no-repeat"
		navBackgroundColor="transparent" :scrollTop="page.scrollTop" :navScrollColor="publicStyles['--color-bk']">
		<template #default>
			<view class="container">
				<view class="public-box-11 px-50 py-50" style="min-height: 730rpx;position: relative;">
					<image style="width: 200rpx;height: 200rpx;position: absolute;top: -8%;right: 2%;z-index: 99;" src="/static/image/box-11-1.png" mode=""></image>
					
					<view class="color fs-36">
						<text>申请成为推广官</text>
					</view>
					<view class="fr-ac mt-100">
						<view class="w-20">
							姓名
						</view>
						<view class="public-input-1 px-30 py-20 fr-ac-jsb flex-1 ml-20" style="color: #fff;">
							<input v-model="formData.real_name" class="flex-1 fs-26" type="text" placeholder="请输入姓名" />
						</view>
					</view>
					<view class="fr-ac mt-40">
						<view class="w-20">
							手机号
						</view>
						<view class="public-input-1 px-30 py-20 fr-ac-jsb flex-1 ml-20" style="color: #fff;">
							<input v-model="formData.phone" class="flex-1 fs-26" type="number" maxlength="11" placeholder="请输入手机号" />
						</view>
					</view>
					<view @click="state.is_agree = !state.is_agree" class="fr-ac-jc mt-60">
						<up-icon v-if="state.is_agree" name="yuanxingxuanzhongfill" customPrefix="custom-icon" size="18"
							:color="publicStyles['--color']"></up-icon>
						<up-icon v-else name="yuanxingweixuanzhong" customPrefix="custom-icon" size="18"
							:color="publicStyles['--color']"></up-icon>
						<view class="ml-10 fs-24">
							<text class="">我已阅读并同意</text>
							<text class="color" @click.stop="$u.route('/')">《分销协议及规则》</text>
						</view>
					</view>
					<view @click="submit" class="public-btn-3 transition px-30 py-25 t-c mt-80">
						<view class="text-color-b fs-32">
							申请
						</view>
					</view>
				</view>
				
			</view>
		</template>
	</w-layout>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		computed,
		nextTick
	} from 'vue'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad, onPageScroll
	} from '@dcloudio/uni-app'
	import {
		useAppStore
	} from '@/store/app'
	import {
		useColorStore
	} from '@/store/color'
	import {
		apply_extension
	} from '@/utils/request/api';
	import {
		useUserStore
	} from '@/store/user'
	const userStore = useUserStore()
	const appStore = useAppStore()
	const colorStore = useColorStore()
	const {
		publicStyles
	} = storeToRefs(colorStore)
	onLoad(async(options) => {
	})
	onMounted(() => {
		appStore.loadingHandler(false)
	})
	onPageScroll((e)=>{
		page.scrollTop = e.scrollTop
	})
	const page = reactive({
		scrollTop:0
	})
	
	const state = reactive({
		is_agree: false
	})
	
	const formData = reactive({
		phone:'',
		real_name:''
	})
	
	
	async function submit(){
		if(!state.is_agree){
			return uni.$u.toast('请阅读《分销协议及规则》')
		}
		if(!formData.real_name){
			return uni.$u.toast('请输入姓名')
		}
		if(!uni.$u.test.mobile(formData.phone)){
			return uni.$u.toast('请输入正确手机号')
		}
		const res = await apply_extension({
			...formData
		})
		uni.$u.toast('已提交申请')
		setTimeout(()=>{
			uni.navigateBack()
		},1000)
	}
</script>

<style lang="scss">
	.shadow {
		box-shadow: 2rpx 2rpx 12rpx var(--shadow);
	}
	.color{
		color: var(--color);
	}

	.container {
		width: 100%;
		min-height: 100%;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		padding: 50rpx;
		
	}
	
	.login-btn {
		color: white !important;
		background: var(--color) !important;
		border-radius: 12rpx !important;
	}
</style>